<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-26 09:13:40
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-26 15:33:57
-->
<template>
    <div class="main-content-right">
        <div>
            <div class="topHeader">
                <div class="kuai"></div>
                <div class="topHeaderText">会员卡</div>
            </div>
        </div>
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in listData" :key="index">
                <el-image
                    style="width: 100%; height: 200px"
                    :src="item.charge_image"
                ></el-image>
            </el-carousel-item>
        </el-carousel>
        <div class="title">会员权益</div>
        <div class="quangyiBox">
            <div
                class="content_item"
                v-for="(item, index) in lists"
                :key="index"
            >
                <div class="head">
                    <i class="iconfont" :class="item.iconname"></i>
                </div>
                <div class="text">
                    <div class="text_top">{{ item.title }}</div>
                    <div class="text_bottom">{{ item.lable }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getListsType } from "@/api/member/index";
export default {
    data() {
        return {
            listData: [],
            lists: [
                {
                    iconname: "icon-kemuxiangmu",
                    title: "微课",
                    lable: "部分直播课VIP会员免费看"
                },
                {
                    iconname: "icon-kemuxiangmu",
                    title: "海量直播课程任你看",
                    lable: "部分直播课VIP会员免费看"
                },
                {
                    iconname: "icon-kemu",
                    title: "智测你的水平",
                    lable: "贴合教材；同步海量习题；学习更全面"
                },
                {
                    iconname: "icon-ketang1",
                    title: "同步练习 学习更轻松",
                    lable: "贴合教材；同步海量习题；学习更全面"
                },
                {
                    iconname: "icon-chengyuanliebiao1",
                    title: "趣练出你的精彩",
                    lable: "贴合教材；同步海量习题；学习更全面"
                },
                {
                    iconname: "icon-ziliaotongbu",
                    title: "自评弥补你的短板",
                    lable: "贴合教材；同步海量习题；学习更全面"
                }
            ]
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            var query = {};
            var list = await getListsType(query);
            console.log("会员列表：", list);
            if (list.code == 200) {
                this.listData = list.data.data;
            }
        }
    }
};
</script>

<style scoped lang="scss">
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 20px;
    background: #fff;
    box-sizing: border-box;

    .topHeader {
        display: flex;
        width: 100%;
        border-bottom: 2px #dadfe6 solid;
        padding-bottom: 20px;
        margin-bottom: 20px;
        .kuai {
            width: 4px;
            height: 20px;
            background: #018854;
            margin-right: 12px;
        }
        .topHeaderText {
            width: 48px;
            height: 22px;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            color: #018854;
        }
    }

    .title {
        font-size: 18px;
        font-weight: 600;
        color: #4a4034;
        margin: 30px 0 0px 0;
    }
}

.quangyiBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}

.content_item {
    width: 30%;
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 42px;
        color: rgba(0, 213, 162, 1);
        min-width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(0, 213, 162, 1);
        margin-right: 15px;

        i {
            font-size: 24px;
        }
    }

    .text {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .text_top {
            font-size: 17px;
            color: rgba(74, 64, 52, 1);
            line-height: 24px;
        }

        .text_bottom {
            font-size: 14px;
            color: rgba(153, 153, 153, 1);
        }
    }
}
</style>
